<template>
  <el-container class="body-content">
    <el-header>
      <!-- 头部 -->
      <Header></Header>
    </el-header>
    <el-main>
      <!-- 路由 -->
      <el-menu
        class="navigation-menu"
        default-active="1"
        mode="horizontal"
        background-color="#F56C6C"
        text-color="#fff"
        active-text-color="#303133"
      >
        <el-menu-item index="1">
          <router-link to="/welcome" tag="div">首页</router-link>
        </el-menu-item>
        <el-menu-item index="6">
          <router-link to="/notice" tag="div">公告</router-link>
        </el-menu-item>
        <el-menu-item index="3">
          <router-link to="/course" tag="div">课程日程</router-link>
        </el-menu-item>
        <el-menu-item index="2">
          <router-link to="/classroom" tag="div">教室列表</router-link>
        </el-menu-item>

        <el-menu-item index="4">
          <router-link to="/applyHistory" tag="div">申请记录</router-link>
        </el-menu-item>
        <el-menu-item index="5">
          <el-badge v-show="isShowBadge" :value="messageCount" type="primary" class="item">
            <router-link to="/message" tag="div">我的留言</router-link>
          </el-badge>
        </el-menu-item>

        <el-tooltip class="item" effect="dark" content="点击刷新" placement="bottom">
          <el-button @click="reloadPage" type="primary" icon="el-icon-refresh" circle></el-button>
        </el-tooltip>
      </el-menu>

      <!-- 路由显示位置 -->
      <router-view></router-view>
    </el-main>

    <el-footer>
      <!-- 脚部 -->
      <Footer></Footer>
    </el-footer>
  </el-container>
</template>

<script>
import Footer from "./setting/Footer";
import Header from "./setting/Header";
export default {
  inject: ["reload"],
  data() {
    return {
      username: "",
      userId: "",
      messageCount: 0,
      isShowBadge: true
    };
  },
  created() {
    let token = this.$route.query.token;
    if (token) {
      sessionStorage.setItem("USER-TOKEN", token);
      location.href = "http://localhost:8081/#/welcome";
    }
    this.getUserInfo();
  },
  methods: {
    getUserInfo() {
      this.$http
        .get("/auth/userInfo")
        .then(resp => {
          let { msg, data } = resp.data;
          let userId = data.userId;
          this.getMessageCount(userId);
          this.username = data.username;
        })
        .catch(resp => {});
    },
    reloadPage() {
      this.reload();
    },
    getMessageCount(userId) {
      if (this.userId == null) {
        this.isShowBadge = false;
      } else {
        this.$http
          .get("board/noAuthorize/messageCount/" + userId)
          .then(resp => {
            let { code, msg, data } = resp.data;
            if (code == 1) {
              this.messageCount = data.count;
            }
          })
          .catch(resp => {});
      }
    }
  },
  components: {
    Footer,
    Header
  }
};
</script>

<style scoped lang='less'>
.body-content {
  width: 1000px;
  margin-left: 13%;
  background-color: #eeeeee;
  border-radius: 15px;
}
.navigation-menu {
  border-radius: 8px;
}
.el-menu-item {
  border-radius: 8px;
}

.el-header,
.el-footer {
  border-radius: 8px;
  background-color: #606266;
  color: #333;
}

.el-main {
  margin-top: 10px;
  background-color: #e9eef3;
  color: #333;
}
.el-footer {
  margin-top: 60px;
}
.el-menu {
  .el-button--primary {
    margin-left: 380px;
    margin-top: 10px;
  }
}
</style>